<template>
  <div class="wrap" :class="{ active: !showAddress }">
    <div class="selects">
      <!-- 省 -->
      <el-select
        :disabled="disabled"
        :clearable="clearable"
        v-model="info.provinceCode"
        placeholder="省"
        @change="provinceCodeChange"
      >
        <el-option v-for="it in provinceOptions" :key="it.areaCode" :label="it.areaName" :value="it.areaCode" />
      </el-select>

      <!-- 市 -->
      <el-select
        :disabled="disabled"
        :clearable="clearable"
        v-model="info.cityCode"
        placeholder="市"
        @change="cityCodeChange"
      >
        <el-option v-for="it in cityOptions" :key="it.areaCode" :label="it.areaName" :value="it.areaCode" />
      </el-select>

      <!-- 区县 -->
      <el-select
        :disabled="disabled"
        :clearable="clearable"
        v-model="info.countyCode"
        placeholder="区/县"
        @change="countyCodeChange"
      >
        <el-option v-for="it in countyOptions" :key="it.areaCode" :label="it.areaName" :value="it.areaCode" />
      </el-select>
    </div>

    <el-input
      v-if="showAddress"
      :disabled="disabled"
      placeholder="请输入详细地址"
      v-model="info.address"
      @change="addressChange"
      maxlength="50"
    />
  </div>
</template>
<script>
import { getAreaData } from '@/api'
export default {
  model: {
    prop: 'addressInfo',
    event: 'infoChange'
  },
  props: {
    addressInfo: {
      type: Object,
      default: () => ({})
    },
    showAddress: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      provinceOptions: [],
      cityOptions: [],
      countyOptions: [],
      info: {
        provinceCode: '',
        cityCode: '',
        countyCode: '',
        address: ''
      },

      //是否初始过options选项
      isInitOptions: false
    }
  },
  mounted() {
    this.$emit('infoChange', { ...this.info })
    // 获取省Options
    this.getProvinceOptions()
  },
  watch: {
    addressInfo: {
      //监听第一次addressInfo有值的情况，初始化OPtions选项
      handler(newValue) {
        if (newValue.provinceCode && newValue.cityCode && newValue.countyCode && !this.isInitOptions) {
          this.getCityOptions(newValue.provinceCode)
          this.getCountyOptions(newValue.cityCode)
          this.info = { ...newValue }
          this.isInitOptions = true
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // change 事件的好处是通过代码修改select的值，不会出发change事件
    provinceCodeChange(val) {
      this.isInitOptions = true
      //重置值
      this.info.cityCode = ''
      this.info.countyCode = ''
      this.info.address = ''

      //重置options项
      this.cityOptions = []
      this.countyOptions = []

      //获取新的options
      val && this.getCityOptions(val)

      //更新addressInfo
      this.$emit('infoChange', { ...this.info })
    },
    cityCodeChange(val) {
      this.isInitOptions = true
      //重置值
      this.info.countyCode = ''
      this.info.address = ''

      //重置options项
      this.countyOptions = []

      //获取新的options
      val && this.getCountyOptions(val)

      //更新addressInfo
      this.$emit('infoChange', { ...this.info })
    },

    countyCodeChange(val) {
      //重置值
      this.isInitOptions = true
      this.info.address = ''
      //更新addressInfo
      this.$emit('infoChange', { ...this.info })
    },

    addressChange() {
      this.$emit('infoChange', { ...this.info })
    },

    getProvinceOptions() {
      getAreaData({ parentCode: '000000' }).then(res => {
        console.log("返回数据：",res)
        if (res.code == 10000) {
          const { datas } = res
          this.provinceOptions = datas
        }
      })
    },
    getCityOptions(val) {
      getAreaData({ parentCode: val }).then(res => {
        if (res.code == 10000) {
          const { datas } = res
          this.cityOptions = datas
        }
      })
    },
    getCountyOptions(val) {
      getAreaData({ parentCode: val }).then(res => {
        if (res.code == 10000) {
          const { datas } = res
          this.countyOptions = datas
        }
      })
    },
    resetForm() {
      this.info = {
        provinceCode: '',
        cityCode: '',
        countyCode: '',
        address: ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.wrap {
  display: flex;
  .selects {
    display: inline-flex;
    width: 50%;
    .el-select:nth-child(1),
    .el-select:nth-child(2) {
      margin-right: 10px;
    }
  }

  & > .el-input {
    margin-left: 10px;
    width: 50%;
  }
}

.active {
  .selects {
    width: 100%;
  }
  & > .el-input {
    width: 0;
  }
}
</style>
